<template>
	<view class="container">
		<view class="u-p-30 u-type-white-bg u-m-b-20 u-radius-5">
			<u-form :model="formData" ref="uForm" label-width="150rpx">
				<u-form-item label="收货人" prop="username">
					<u-input v-model="formData.username" placeholder="请输入收货人" />
				</u-form-item>
				<u-form-item label="手机号码" prop="phone">
					<u-input v-model="formData.phone" placeholder="请填写手机号" />
				</u-form-item>
				<u-form-item prop="fullAddress" label="所在地区">
					<u-input type="select" :select-open="areaShow" v-model="formData.fullAddress" disabled
						placeholder="请选择地址" @click="areaShow = true" />
				</u-form-item>
				<u-form-item label="详细地址" :border-bottom="false" prop="address">
					<u-input type="textarea" height="10rpx" v-model="formData.address" placeholder="请输入详细地址" />
				</u-form-item>
			</u-form>
		</view>
		<u-cell-group>
			<u-cell-item bg-color="white" title="设置默认地址"
				:title-style="{ fontSize: '28rpx', fontWeight: '500', color: '#191919' }" :arrow="false">
				<u-switch slot="right-icon" :loading="false" active-color="#009774" inactive-color="#fff" size="40"
					v-model="formData.is_default"></u-switch>
			</u-cell-item>
		</u-cell-group>
		<view class="u-m-t-60"><u-button size="default" shape="circle" type="success" @click="saveAddress" :custom-style="{background: '#009275'}">保存</u-button>
		</view>
		<view class="u-m-t-25" v-if="formData.id"><u-button shape="circle" :customStyle="{background:'#FFFFFF',color:'#6A6A6A'}"
				@click="deleteAddress">删除</u-button></view>
		<u-picker mode="region" :safeAreaInsetBottom="true" @confirm="selectAddress" v-model="areaShow"
			  :default-region="formData.areaName"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				areaShow: false,
				// 所需参数
				formData: {
					username: '',
					phone: '',
					address: '',
					fullAddress: '',
					type: '',
					is_default: true,
					id: '',
					areaName: []
				},

				// 表单验证
				rules: {
					username: [{
						required: true,
						min: 2,
						max: 8,
						message: '请输入收货人',
						trigger: ['change', 'blur']
					}],
					phone: [{
							validator: (rule, value, callback) => {
								return value !== ''
							},
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
							message: '请输入正确的手机号',
							trigger: ['change', 'blur']
						}
					],
					fullAddress: [{
						validator: (rule, value, callback) => {
							return value !== ''
						},
						message: '请选择地址',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		onLoad(options) {
			this.addOrEdit(options.id,options.type,options.tempAddress)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},

		methods: {
			// 获取地址详情
			getAddressDetail(id) {
				this.$u.api.findShopAddressList({
					id
				}).then(res => {
					if (res.code === 1) {
						// 获取地址
						let {
							address,
							city,
							county,
							is_default,
							phone,
							province,
						} = res.data
						this.formData = {
							...this.formData,
							...res.data
						}
						this.formData.fullAddress = province + city + county
						this.formData.areaName = [province, city, county]
					}
				}).catch(err => {
					this.$u.toast(err.msg)
				})
			},
			// 添加或修改地址
			addOrEditAddress(params) {
				this.$u.api.editShopAddress(params).then(res => {
					// 重新请求地址列表
					uni.$emit('againRequest',{id: params.id})
					// 清空规则
					this.$u.toast(res.msg, 'success')
					setTimeout(() => uni.navigateBack(), 1500)
				}).catch(err => {
					this.$u.toast(err.msg, 'error')
				})
			},
			// 是修改还是添加
			addOrEdit(id,type,tempAddress) {
				if (id) {
					uni.setNavigationBarTitle({
						title: '修改地址'
					});
					this.formData.type = 'edit'
					this.getAddressDetail(id)
				} else {
					uni.setNavigationBarTitle({
						title: '添加地址'
					});
					this.formData.type = 'add'
					if(type == 1) this.formData = {...this.formData,...JSON.parse(tempAddress)}
				}
			},
			// 删除地址
			deleteAddress() {
				this.formData.type = 'delete'
				let {
					id,
					type
				} = this.formData
				this.$u.api.editShopAddress({
					id,
					type
				}).then(res => {
					uni.$emit('againRequest',{id})
					this.$u.toast(res.msg, 'success')
					setTimeout(() => uni.navigateBack(), 1500)
				}).catch(err => {
					this.$u.toast(err.msg)
				})
			},
			// 选择地址
			selectAddress(e) {
				let areaName = []
				Object.values(e).forEach((item, index) => {
					areaName.push(item.label)
				});
				this.formData.fullAddress = areaName.join('')
				this.formData.areaName = areaName
			},
			// 保存地址
			saveAddress() {
				this.$refs.uForm.validate(flag => {
					if (flag) {
						this.addOrEditAddress({
							username: this.formData.username,
							phone: this.formData.phone,
							type: this.formData.type,
							address: this.formData.address,
							province: this.formData.areaName[0],
							city: this.formData.areaName[1],
							county: this.formData.areaName[2],
							id: this.formData.id,
							is_default: this.formData.is_default ? 1 : 0
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}



	/deep/.u-field.data-v-1c764f86 {
		padding: 20rpx 0;
	}
</style>